<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>:: Login:: </title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.css" />
  <link rel="stylesheet" href="css/foundation-icons.css" />

  <!-- If you are using the gem version, you need this only -->
  <link rel="stylesheet" href="css/app.css" />

  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>

  <!-- body content here -->
<nav class="top-bar">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#sidebar"><i class="fi-web size-24 blur"></i> Main website </a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
  </ul>
  <section class="top-bar-section">
  
    <!-- Left Nav Section -->
    <ul class="right">
     
      <li class="divider"></li>
      <li class="has-dropdown"><a href="#">Options</a>

        <ul class="dropdown">
          <li class="has-dropdown"><a href="#">Register</a>
          </li>
          <li><a href="#">Contact Admin</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </li>
      <li class="divider"></li>
    </ul>

    
  </section>

</nav>
<section class="main large-6">
<!--Header-->
<div class="row">
<div class="large-12 columns">
	  <h2 class="docs header"><a href="#">:: Login ::</a></h2>
	  <hr>
</div>
</div>
<!--Content-->
<div class="row">
<div class="large-12 columns">
<form>
  <fieldset>
    <legend>Login</legend>

    <div class="row">
      <div class="large-12 columns">
        <label>Username or email</label>
        <input type="text" placeholder="Username or Email">
      </div>
    </div>
	<div class="row">
      <div class="large-12 columns">
        <label>Password</label>
        <input type="text" placeholder="Password">
      </div>
    </div>
	<div class="row">
          <div class="small-6 large-6 columns">
            <a href="#" class="tiny button">Login</a><br>
            
          </div>
         
        </div>

  </fieldset>
</form>
</div>
<!--left side-->  
 
  </div>
</section>
 <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.alerts.js"></script>
  <script src="js/foundation/foundation.clearing.js"></script>
  <script src="js/foundation/foundation.cookie.js"></script>
  <script src="js/foundation/foundation.dropdown.js"></script>
  <script src="js/foundation/foundation.forms.js"></script>
  <script src="js/foundation/foundation.joyride.js"></script>
  <script src="js/foundation/foundation.magellan.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <script src="js/foundation/foundation.placeholder.js"></script>
  <script src="js/foundation/foundation.reveal.js"></script>
  <script src="js/foundation/foundation.section.js"></script>
  <script src="js/foundation/foundation.tooltips.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <script src="js/foundation/foundation.interchange.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>
